@import "../../../../assets/scss/mixins/palette";

.not-displayed {
  display: none;
}

.workspaces-container {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  height: 400px;
  overflow: scroll;

  .workspace-menu-line {
    display: flex;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    .workspace-menu-icon {
      width: 20px;
    }
    .manage-workspaces-actions-container {
      display: flex;
      justify-content: center;
      align-items: center;
      .workspace-menu-icon {
        transition: opacity ease 0.3s;
        opacity: 1;
      }
      .workspace-menu-icon:hover {
        cursor: pointer;
        transition: opacity ease 0.3s;
        opacity: 0.7;
      }
    }
  }

  .workspace-name-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    span {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 180px;
    }

    span:nth-child(1) {
      font-size: 15px;
      line-height: initial;
      padding-left: 10px;
    }

    span:nth-child(2) {
      font-size: 12px;
      color: $table-text;
      line-height: initial;
      padding-left: 10px;
      padding-top: 2px;
    }
  }

  .workspace-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 40px;
    height: 40px;
    border: solid $silver-50 1px;
    border-radius: 5px;

    &.local {
      background-color: $local-workspace-blu;
    }

    &.remote {
      background-color: $remote-workspace-purple;

      span {
        color: $white-text-color;
        font-size: 16px;
      }
    }

    i {
      position: relative;
      top: 0;
      color: $white-text-color;
    }
  }
}

::ng-deep {
  .manage-workspaces-modal {
    max-width: 520px!important;
    width: 100%;
  }
}
